<template>
  <live-open-layout>
    <div class="_home" :class="{ _mobile: isMobile }">
      <div class="_swiper">
        <banner :image-list="banners" :loading="bannerLoading" />
      </div>
      <div class="flex flex-col gap-3.31rem">
        <content-box
          title="Featured Boxes"
          more-text="All boxes"
          @more="onMore('/boxs', { button_name: 'all-boxes' })"
        >
          <template #titleIcon>
            <img class="_content-box-icon w-1.13rem" :src="boxActive" />
          </template>
          <hot-boxed :boxes="hotBoxList" :loading="hotLoading" />
        </content-box>
        <content-box
          title="Battles Highlights"
          more-text="All battles"
          @more="onMore('/battles', { button_name: 'all-battles' })"
        >
          <template #titleIcon>
            <img class="_content-box-icon w-1.19rem" :src="battleActive" />
          </template>
          <battles :params="battlesParams" />
        </content-box>
        <content-box
          title="Forge Highlights"
          more-text="All forge"
          @more="onMore('/forge', { button_name: 'all-forge' })"
        >
          <template #titleIcon>
            <img class="_content-box-icon w-0.81rem" :src="forgeActive" />
          </template>
          <hot-forge :forge="hotForgeList" :loading="hotLoading" />
        </content-box>
        <content-box title="How Realbox Works" :show-more="false">
          <template #titleIcon>
            <img class="_content-box-icon w-1.13rem" :src="question" />
          </template>

          <div class="_realbox-work-list">
            <div
              class="_realbox-work-item"
              v-for="(howWork, idx) in howRealboxWorks"
              :key="idx"
            >
              <div class="_icon">
                <img
                  :src="howWork.icon"
                  class="h-full"
                  style="object-fit: contain"
                />
              </div>
              <div class="_title _text-middle">
                {{ idx + 1 }}.{{ howWork.title }}
              </div>
              <p>{{ howWork.desc }}</p>
            </div>
          </div>
        </content-box>
      </div>
      <div class="_about-realbox-container">
        <about-realbox />
      </div>
    </div>
  </live-open-layout>
</template>

<script lang="tsx" setup>
import { getBanner, getHotBoxAndForge } from "@/api/home";
import { onBuriedPoint } from "@/api/user";
import battleActive from "@/assets/battle-active.png";
import boxActive from "@/assets/box-active.png";
import cash from "@/assets/cash.png";
import forgeActive from "@/assets/forge-active.png";
import openBox from "@/assets/open-box.png";
import question from "@/assets/question.png";
import winItem from "@/assets/win-item.png";
import Battles from "@/components/Battles/battles.vue";
import ContentBox from "@/components/ContentBox/contentBox.vue";
import { useMedia } from "@/hooks/useMedia";
import LiveOpenLayout from "@/layout/live-open-layout/live-open-layout.vue";

import AboutRealbox from "./AboutRealbox/aboutRealbox.vue";
import Banner from "./Banner/banner.vue";
import HotBoxed from "./HotBoxes/hotBoxes.vue";
import HotForge from "./HotForge/hotForge.vue";

const router = useRouter();
const isMobile = useMedia();

const banners = ref<string[]>([]);
const hotForgeList = ref<API.Home.HotForgeItem[]>([]);
const hotBoxList = ref<API.Home.HotBoxItem[]>([]);
const battlesParams = ref<API.Battles.BattleListParams>({
  page: 1,
  size: 3,
});

const hotLoading = ref(false);
const bannerLoading = ref(false);

const howRealboxWorks = [
  {
    icon: openBox,
    title: "Open Boxes",
    desc: "Find your perfect boxes & experience the online excitement!",
  },
  {
    icon: winItem,
    title: "Win Items",
    desc: "Uncover one item per pack from top brands you know & love!",
  },
  {
    icon: cash,
    title: "Cash or Claim",
    desc: "Sell back unwanted items, cash them out , or have them deliverd!",
  },
];

async function getBanners() {
  bannerLoading.value = true;
  banners.value = await getBanner();
  bannerLoading.value = false;
}

async function getHotInfo() {
  hotLoading.value = true;
  const result = await getHotBoxAndForge({
    forge_page: 1,
    forge_size: isMobile.value ? 4 : 5,
    box_page: 1,
    box_size: isMobile.value ? 6 : 5,
  });
  hotBoxList.value = result?.box_list || [];
  hotForgeList.value = result?.forge_list || [];
  hotLoading.value = false;
}

function onMore(path: string, buriedParams: API.User.BuriedPointParams) {
  router.push(path);
  buriedParams &&
    onBuriedPoint({
      ...buriedParams,
      action: "点击按钮",
      page_name: "首页",
    });
}

watch(isMobile, (currentValue, previousValue) => {
  if (currentValue !== previousValue) {
    getHotInfo();
  }
});

onBeforeMount(async () => {
  getBanners();
  getHotInfo();
});
</script>

<style lang="less" scoped>
._swiper {
  margin: 2.19rem 0 3.38rem;
  aspect-ratio: 61.69 / 17.69;
  min-height: 0;
  background-color: var(--realbox-bg-box);
  border-radius: var(--el-border-radius-base);
}

._realbox-work-list {
  @apply flex;
  gap: 1.5rem;
  aspect-ratio: 61.81 / 15.31;
  min-height: 0;
  padding: 0 2.75rem;
  background-color: var(--realbox-bg-box);
  border-radius: var(--el-border-radius-base);
  ._realbox-work-item {
    @apply flex-1 w-0 h-full flex flex-col items-center justify-center text-center;
    ._icon {
      height: 3.75rem;
    }
    ._title {
      display: inline-block;
      margin: 0.75rem 0 0.75rem;
    }
    p {
      @apply text-hex-9D9D9D;
      margin: 0;
      font-size: 0.88rem;
      line-height: 2rem;
    }
  }
}

._content-box-icon {
  object-fit: contain;
}

._about-realbox-container {
  margin: 3.13rem 0;
}
</style>

<style lang="less" scoped>
._home._mobile {
  padding: 0 0.94rem;
  ._swiper {
    margin: 1.19rem 0 3.19rem;
    aspect-ratio: 21.72 / 7.19;
    border-radius: 0;
  }

  ._realbox-work-list {
    @apply flex-col;
    gap: 0.38rem;
    padding: 0;
    aspect-ratio: unset;
    background-color: transparent;
    ._realbox-work-item {
      @apply flex-col w-full;
      padding: 1.94rem 2.06rem 1rem;
      background-color: var(--realbox-bg-box);
      border-radius: inherit;
    }
  }

  ._about-realbox-container {
    margin: 1.25rem 0 1.63rem;
  }
}
</style>
